<template>
	<view class="guess">
		<!-- 猜你喜欢 -->
		<view class="f-header m-t">
			<view class="tit-box">
				<text class="line"></text>
				<text class="tit">猜你喜欢</text>
				<text class="line"></text>
			</view>
		</view>

		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.defaultAlbum" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.pName}}</text>
				<text class="price"><text class="unit">￥</text>{{item.fSalePrice}} <text
						class="pay">已付款{{item.iSales}}人</text>
					<image class="collect" src="/static/img/2/2-13.png" mode="aspectFill"></image>

				</text>


			</view>
		</view>
	</view>


</template>

<script>
	export default {
		name: "guess2",
		data() {
			return {
				order: "asc",
				pagesize: 12,
				pageindex: 1,
				goodsList: []

			}
		},
		props: ["goods_id_exclude", "categoryid", "type"],
		async mounted() {
			let datas = {
				queryCondition: {
					order: [{
							fieldname: "iOrder",
							direction: this.order
						}

					],
				 pagesize: this.pagesize,
					pageindex: this.pageindex,
					where: [{
							fieldname: "goods_id_exclude",
							valuefrom: this.goods_id_exclude.join(",")
						},
						{
							fieldname: "categoryid",
							valuefrom: this.categoryid.join(",")
						},
						{
							fieldname: "type",
							valuefrom: this.type
						}
					],
				}
			}
			await this.$Request.post(this.$api.httpApi.home.getRecommendCartList +
				'&token=' + this.$token, datas).then(res => {
				if (res.code == 200) {
					this.goodsList = res.data.data
				}
			})
		},
		methods: {
			navToDetailPage(item) {
				let id = item.pid;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${item.iShopId}`
				})
			}
		}


	}
</script>

<style lang="scss">
	/* 猜你喜欢 */
	.f-header {
		display: flex;
		align-items: center;
		// height: 140upx;
		padding: 48upx 30upx 24upx;

		.tit-box {
			flex: 1;
			display: flex;
			// flex-direction: column;
			justify-content: center;
			align-items: center;

			.tit {
				display: inline-block;
				font-size: 30upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin: 0 10upx;
			}

			.line {
				display: inline-block;
				width: 52upx;
				height: 2upx;
				background: rgba(102, 102, 102, 1)
			}
		}


	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 29upx;
			background: #fff;
			margin-bottom: 21upx;

			&:nth-child(2n+1) {
				margin-right: 21upx;
			}

		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			background: #fff;
			border-bottom: 1upx solid #EEEEEE;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			margin-top: 40upx;
			font-size: 28upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(68, 68, 68, 1);
			line-height: 35upx;
			padding-left: 30upx;
			padding-right: 30upx;
			margin-top: 10upx;
		}

		.price {
			font-size: 26upx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: rgba(240, 64, 111, 1);
			padding-left: 30upx;
			position: relative;

			.pay {
				font-size: 24upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
				margin-left: 6upx;
			}

			.collect {
				position: absolute;
				right: 29upx;
				bottom: 10upx;
				width: 30upx;
				height: 28upx;
				z-index: 1;
			}

		}

		.recommend {
			width: 102upx;
			height: 32upx;
			background: rgba(247, 172, 3, 0);
			border: 1upx solid rgba(240, 64, 111, 1);
			border-radius: 16upx;
			font-size: 17upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: rgba(240, 64, 111, 1);
			line-height: 32upx;
			text-align: center;
			margin-left: 30upx;
			margin-top: 10upx;
		}


	}
</style>

